<template>
  <div class="invite" ref="invite">
    <div class="invite-wrapper">
      <v-header class="invite-header"></v-header>
      <div class="invite-body">
        <h3 class="invite-title">邀請好友得糖果</h3>
        <div class="user-info">
          <div class="avatar"></div>
          <p class="user-email">{{email | phoneNumberFilter}}</p>
        </div>
        <div class="invite-description">
          <p>將<b>連接</b>或<b>二維碼海報</b>發送給好友<br>通過連接或二維碼註冊CHAOEX即可獲得響應獎勵</p>
        </div>
        <div class="activity-container">CHAOEX撒幣啦！點擊鏈接邀請好友送CHEX幣，連續一個月不定期空投再送CHEX幣！</div>
        <el-button class="submit-btn copy-link" type="primary" :data-clipboard-text="'CHAOEX撒幣啦！點擊鏈接邀請好友送CHEX幣，連續一個月不定期空投再送CHEX幣！' + link" @click="handleCopyLink">複製連接邀請好友</el-button>
        <p class="or">or</p>
        <el-button class="submit-btn" type="primary" @click="productionPoster">生成海報邀請好友</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
import Header from '@/components/Header'
import { getRegisterTime, getPersonalInfo } from '@/Api/request'
import { mapGetters } from 'vuex'
export default {
  name: 'invite',
  data () {
    return {
      invitedId: '',
      invitedUid: '',
      email: ''
    }
  },
  created () {
    this._getInvitedInfo()
    this._getPersonalInfo()
  },
  mounted () {
    this.$nextTick(() => {
      this._initScroll()
    })
  },
  computed: {
    ...mapGetters([
      'token',
      'uid',
      'loginEmail'
    ]),
    link () {
      let email = this.email ? this.email.substring(0, 3) + '****' + this.email.substr(this.email.length - 4) : ''
      return `${process.env.INVITE_LINK}?invitedId=${this.invitedId}&email=${email}`
    }
  },
  methods: {
    _initScroll () {
      this.inviteScroll = new this.$BScroll(this.$refs.invite, {
        click: true
      })
    },
    _getInvitedInfo () {
      if (this.uid) {
        getRegisterTime(this.uid).then(res => {
          if (res.invited_id) {
            this.invitedId = res.invited_id
            this.invitedUid = res.invited_uid
          } else {
            this.$message.error({
              message: '網絡原因邀請碼獲取失敗，請稍後再試',
              center: true
            })
            this.$route.go(-1)
          }
        })
      } else {
        this.$message.error({
          message: '您已退出，請重新登錄',
          center: true
        })
      }
    },
    _getPersonalInfo () {
      if (this.token) {
        const dataJson = {
          token: this.token,
          uid: this.uid
        }
        getPersonalInfo(dataJson).then(res => {
          console.log(res)
          if (res.attachment) {
            this.email = res.attachment.phone || res.attachment.email
          } else {
            this.email = this.loginEmail || ''
          }
        })
      } else {
        this.$message.error({
          message: '您已退出，請重新登錄',
          center: true
        })
      }
    },
    productionPoster () {
      this.$router.push({
        name: 'poster',
        params: {
          link: this.link,
          email: this.email
        }
      })
    },
    handleCopyLink () {
      const clipboard = new Clipboard('.copy-link')
      clipboard.on('success', e => {
        this.$message({
          message: '複製成功',
          center: true,
          type: 'success'
        })
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message({
          message: '該瀏覽器不支持自動複製',
          center: true,
          type: 'error'
        })
        // 释放内存
        clipboard.destroy()
      })
    }
  },
  filters: {
    phoneNumberFilter (value) {
      if (value) {
        return value.substring(0, 3) + '****' + value.substr(value.length - 4)
      } else {
        return 'CHAOEX'
      }
    }
  },
  components: {
    vHeader: Header
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.invite-wrapper{
  padding: 37px 30px 0;
}
.invite-header{
  margin-bottom: 52px;
}
.invite-body{
  box-sizing: border-box;
  padding: 56px 44px 109px;
  background: rgba(255,255,255,1);
  border-radius: 9px;
  .invite-title{
    margin-bottom: 26px;
    font-size: 38px;
    color: rgba(234,185,0,1);
    line-height: 38px;
    text-align: center;
  }
  .user-info{
    margin-bottom: 27px;
    text-align: center;
    font-size: 0;
    .user-email {
      font-size: 22px;
      color:rgba(234,185,0,1);
      line-height: 22px;
    }
  }
  .invite-description{
    margin-bottom: 97px;
    font-size: 26px;
    color: rgba(29,64,180,1);
    line-height: 36px;
    text-align:center;
    b{
      color: #1D40B4;
      font-weight: bold;
    }
  }
  .activity-container{
    height: 80px;
    margin-bottom: 15px;
    line-height: 80px;
    text-align: center;
    background:rgba(244,247,253,1);
    border-radius: 6px;
    font-size: 28px;
    color: rgba(102,102,102,1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .submit-btn{
    width: 100%;
    height: 91px;
    border-radius: 46px;
    background: rgba(24,150,255,0.58);
    font-size: 36px;
    font-weight: bold;
  }
  .or{
    height: 20px;
    margin: 46px auto;
    font-size: 20px;
    color:rgba(102,102,102,1);
    line-height: 20px;
    text-align: center;
  }
}

.avatar{
  width: 98px;
  height: 98px;
  margin: 0 auto 26px;
  background: url("../assets/images/avatar.png") no-repeat;
  background-size: cover;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .avatar
    background-image: url("../assets/images/avatar@2x.png");
    background-size: cover;

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  .avatar
    background-image: url("../assets/images/avatar@3x.png");
    background-size: cover;
</style>
